<template>
	<view class="container-box">
		<view class="header-box">
			<view>门店：</view>
			<view>
				<picker @change="storePickerChange" :range="storeArr" range-key="name">
					<view class="picker-tip">{{currentStore.name || '选择门店'}}<uni-icons type="down" color="#000"
							size="20"></uni-icons></view>
				</picker>
			</view>
		</view>
		<view class="middle-header">
			<view>订单管理</view>
		</view>
		<view class="middle-box">
			<uni-row class="demo-uni-row" :gutter="20">
				<uni-col :span="8" v-for="(item,index) in orderManageArr" :key="index">
					<view class="middle-item" @click="orderManageEvent(item.id)">{{item.name}}</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="middle-header">
			<view>包间管理</view>
		</view>
		<view class="middle-box">
			<uni-row class="demo-uni-row" :gutter="20">
				<uni-col :span="8" v-for="(item,index) in roomManageArr" :key="index">
					<view class="middle-item" @click="roomManageEvent(item.id)">{{item.name}}</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="middle-header">
			<view>其他</view>
		</view>
		<view class="middle-box">
			<uni-row class="demo-uni-row" :gutter="20">
				<uni-col :span="8" v-for="(item,index) in otherManageArr" :key="index">
					<view class="middle-item" @click="otherManageEvent(item.id)">{{item.name}}</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeArr: [],
				currentStore: {},
				orderManageArr: [{
						id: 1,
						name: '预定订单',
					},
					{
						id: 2,
						name: '美团直订订单'
					},
					{
						id: 3,
						name: '充值订单'
					},
					{
						id: 4,
						name: '美团兑换记录'
					},
					{
						id: 5,
						name: '抖音兑换记录'
					}
				],
				roomManageArr: [{
						id: 1,
						name: '包间列表'
					},
					{
						id: 2,
						name: '保洁记录'
					},
					{
						id: 3,
						name: '预定设置'
					}, {
						id: 4,
						name: '时间卡'
					}, {
						id: 5,
						name: '开大门'
					}
				],
				otherManageArr: [{
						id: 1,
						name: '充值管理'
					},
					{
						id: 2,
						name: '用户列表'
					},
					{
						id: 3,
						name: '员工账号'
					},
					{
						id: 4,
						name: '弹窗广告'
					}
				]
			}
		},

		methods: {
			// 选择门店
			storePickerChange(e) {
				this.currentStore = this.storeArr[e.detail.value]
				uni.setStorageSync('shopId', this.currentStore.shopId)
			},
			// 订单管理
			orderManageEvent(id) {
				const shopId = this.currentStore.shopId;
				let pageUrl = ''
				switch (id) {
					case 1:
						pageUrl = '/pages/pre-order/pre-order?shopId=' + shopId;
						break;
					case 2:
						uni.showToast({
							title: '功能正在开发中，敬请期待',
							duration: 2000,
							icon: 'none'
						})
						//	pageUrl = '/pages/mt-direct-order/mt-direct-order?shopId='+shopId;
						break;
					case 3:
						pageUrl = '/pages/recharge-order/recharge-order?shopId=' + shopId;
						break;
					case 4:
						pageUrl = '/pages/exchange-records/exchange-records?platform=mt&shopId=' + shopId;
						break;
					case 5:
						pageUrl = '/pages/exchange-records/exchange-records?platform=dy&shopId=' + shopId;
						break;
				}
				uni.navigateTo({
					url: pageUrl
				})
			},

			// 包间管理
			roomManageEvent(id) {
				const shopId = this.currentStore.shopId;
				let pageUrl = '';
				switch (id) {
					case 1:
						pageUrl = '/pages/room-list/room-list?shopId=' + shopId;
						break;
					case 2:
						pageUrl = '/pages/clear-record/clear-record?shopId=' + shopId;
						break;
					case 3:
						pageUrl = '/pages/pre-setting/pre-setting?shopId=' + shopId;
						break;
					case 4:
						pageUrl = '/pages/time-card/time-card?shopId=' + shopId;
						break;
					case 5:
						// 开大门
						this.openDoor()
						break;
				}
				uni.navigateTo({
					url: pageUrl
				})
			},
			// 其他管理
			otherManageEvent(id) {
				const shopId = this.currentStore.shopId;
				let pageUrl = ''
				switch (id) {
					case 1:
						pageUrl = `/pages/recharge-manage/recharge-manage?shopId=${shopId}`;
						break;
					case 2:
						pageUrl = `/pages/user-list/user-list?shopId=${shopId}`;
						break;
					case 3:
						pageUrl = `/pages/staff-management/staff-management?shopId=${shopId}`
						break;
					case 4:
						pageUrl = `/pages/store-ad-setting/store-ad-setting?shopId=${shopId}`
						break;
				}
				uni.navigateTo({
					url: pageUrl
				})
			},

			// 开大门
			openDoor() {
				if (!this.currentStore?.shopId) {
					uni.showToast({
						title: '请选择门店',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否确认打开大门？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '#00C250',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/shop/openDoor/${this.currentStore.shopId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 500) {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},

			// 请求店铺列表
			requestEvent() {
				this.$request({
					method: 'get',
					url: '/applet/store/shop/list',
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeArr = res.data || [];
					if (this.storeArr.length > 0) {
						let storageShopId = uni.getStorageSync('shopId')
						if (storageShopId) {
							this.storeArr.forEach((item) => {
								if (item.shopId === storageShopId) {
									this.currentStore = item
								}
							})
						} else {
							this.currentStore = this.storeArr[0]
							uni.setStorageSync('shopId', this.currentStore.shopId)
						}
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onShow() {
			this.requestEvent()
		}
	}
</script>

<style lang="scss" scoped>
	.container-box {
		background: #FFF;
		padding: 0 30rpx 30rpx 30rpx;

		.header-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			height: 100rpx;
			background: #ffd589;
			border: 1px solid #ffd589;
			border-radius: 10rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
			box-shadow:
				7px 7px 12px rgba(0, 0, 0, 0.4),
				inset 0 0 0 rgba(255, 255, 255, 0.9),
				inset 0 0 0 rgba(0, 0, 0, 0.4);
		}

		.picker-tip {
			display: flex;
			align-items: center;
		}

		.middle-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.middle-box {
			// background: #ffe7c4;
			// border: 1px solid #ffe7c4;
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.middle-item {
				background: #ffd589;
				border-radius: 10rpx;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				box-shadow:
					7px 7px 12px rgba(0, 0, 0, 0.4),
					inset 0 0 0 rgba(255, 255, 255, 0.9),
					inset 0 0 0 rgba(0, 0, 0, 0.4);
			}

		}
	}
</style>